<template>
    <view>
        <u-grid :border="false" col="4">
            <u-grid-item
                    v-for="(listItem,listIndex) in list"
                    :key="listIndex"
					@click="click(listItem)"
            >
                <u-icon
                        :customStyle="{paddingTop:20+'rpx'}"
                        :name="listItem.name"
                        :size="22"
                ></u-icon>
                <text class="grid-text">{{listItem.title}}</text>
            </u-grid-item>
        </u-grid>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {
                        name: 'hourglass',
                        title: ' 背单词'
                    },
                    
                    
                ],
            }
        },
        methods: {
            click(obj) {
                console.log(obj.name)
				uni.$u.route({
					url: 'pages/word/index',
					params: {
						name: '单词'
					}
				})
            }
        }
    }
</script>

<style lang="scss">
    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
    }
</style>